<template>
    <div>
        <group-title>热门活动</group-title>
        <div style="margin: 8px;overflow: hidden;" v-for="item in list1" @click="clickActivity">
            <masker style="border-radius: 2px;">
                <div class="m-img" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
                <div slot="content" class="m-title">
                    {{item.title}}
                    <br/>
                    <span class="m-info">{{item.info}}</span>
                </div>
            </masker>
        </div>
    </div>
</template>

<script>
    import { GroupTitle, Masker } from 'vux'

    export default {
        name: 'activity',
        data () {
            return {
                list: [{
                    title: '邀你来当一天咖啡师',
                    info: '了解咖啡小知识，学做香醇咖啡',
                    img: 'https://static.vux.li/demo/1.jpg'
                }, {
                    title: '你的专属口味马卡龙',
                    info: '学习烘焙小技巧，定制私人马卡龙',
                    img: 'https://static.vux.li/demo/2.jpg'
                }, {
                    title: '教你调制经典鸡尾酒',
                    info: '成为派对上充满魅力的调酒师',
                    img: 'https://static.vux.li/demo/1.jpg'
                }, {
                    title: '摄影',
                    info: '教你拍出广告大片',
                    img: 'https://static.vux.li/demo/3.jpg'
                }, {
                    title: '骑行',
                    info: '带你感受城市边缘的魅力',
                    img: 'https://static.vux.li/demo/2.jpg'
                }, {
                    title: '登山',
                    info: '一起探索世外桃源',
                    img: 'https://static.vux.li/demo/1.jpg'
                }],
                list1: [
                    {
                        title: '镜头感动世界',
                        info: '海岛摄影大赛',
                        img: '/static/imgs/article-preview/0.jpeg'
                    }
                ]
            }
        },
        components: {
            GroupTitle,
            Masker
        },
        methods: {
            clickActivity () {
                this.$router.push('/activity/1')
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


    .flex-demo {
        text-align: center;
        color: #fff;
        width: 40%;
        /*background-color: #20b907;*/
        /*border-radius: 4px;*/
        /*background-clip: padding-box;*/
    }

    .m-img {
        padding-bottom: 33%;
        display: block;
        position: relative;
        max-width: 100%;
        background-size: cover;
        background-position: center center;
        cursor: pointer;
        border-radius: 2px;
    }

    .m-title {
        color: #fff;
        text-align: center;
        text-shadow: 0 0 2px rgba(0, 0, 0, .5);
        font-weight: 500;
        font-size: 16px;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }

    .m-info {
        font-size: 12px;
        padding-top: 4px;
        border-top: 1px solid #f0f0f0;
        display: inline-block;
        margin-top: 5px;
    }
</style>
